<template>
	<view class="app">
		<!-- 返回按钮 -->
		<!-- #ifdef H5 -->
		<!-- <view class="back-btn" :style="{top:'48rpx'}" @tap="$xyfun.back()">
			<image src="/static/arrow-left.png" mode="aspectFit"></image>
		</view> -->
		<!-- #endif -->
		<!-- #ifndef H5 -->
		<!-- <view class="back-btn" :style="{top:$xyfun.xysys().top+'px'}" @tap="$xyfun.back()">
			<image src="/static/arrow-left.png" mode="aspectFit"></image>
		</view> -->
		<!-- #endif -->

		<!-- 主要内容区域 -->
		<view class="box_center">
			<image mode="widthFix" src="https://cdn.deletennis.com/join/83814124-67789857-46P3.png"
				style="width: 100%" />
			<!-- <image mode="widthFix" src="/static/new/编组 3@2x_副本.png" -->
			<!-- style="width: 100%" /> -->

			<!-- 套餐选择区域 -->
			<view class="box_fiexd">
				<!-- 使用v-for渲染套餐列表 -->
				<view v-for="(plan, index) in planList" :key="index" class="box_cente1"
					:class="{ ckeckcolor: selectedPlan === index }" @tap="selctopen(index)">
					<view class="box_cente_top">
						<view class="new-title">{{ plan.name }}</view>
						<view>
							<text class="new-jine">
								￥{{ plan.price }}
							</text>
							<text class="new-jine new-qi">起</text>
						</view>
					</view>
					<view class="box_cente_but">
						<view class="box_cente_but1">
							<view class="new-contain-title">{{ plan.devices }}</view>
							<view style="margin-top: 9rpx" class="new-contain-tip">游戏设备</view>
						</view>
						<view class="box_cente_but2">
							<view class="new-contain-title">{{ plan.track }}</view>
							<view style="margin-top: 9rpx" class="new-contain-tip">PK赛道类型(TYPE)</view>
						</view>
						<view class="box_cente_but3">
							<view class="new-contain-title">{{ plan.system }}</view>
							<view style="margin-top: 9rpx" class="new-contain-tip">智能系统</view>
						</view>
					</view>
				</view>
			</view>
		</view>

		<!-- 底部按钮区域 -->
		<view class="box_buttn">
			<view class="box_buttn1">
				<view class="box_buttn_txt1">
					￥{{ currentPlan.price }}
					<text class="box_buttn_txt3">￥{{ currentPlan.original_price }}</text>
				</view>
				<view class="box_buttn_txt2">锁定订单后预计 4-8 周支付</view>
			</view>
			<view class="box_buttn2">
				<button class="box_buttns" @click="toShop">开始配置</button>
				<image class="box_buttn_jian" mode="widthFix"
					src="https://mp-6d73be64-3f57-444c-abdf-f4c469c39f52.cdn.bspapp.com/2024/04/26/21860674-24316838-26P2.png" />
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				selectedPlan: 0,
				planList: []
			}
		},
		onLoad() {
			this.getProduct()
		},
		computed: {
			currentPlan() {
				return this.planList[this.selectedPlan]
			}
		},
		methods: {
			selctopen(index) {
				// 选择套餐
				this.selectedPlan = index
			},
			getProduct() {
				this.$xyfun.storeId().then((store_id) => {
					this.$api.get({
						url: '/Join_Plans/getAllPlans',
						loadingTip: '加载中...',
						success: res => {
							this.planList = res
						}
					});
				})
			},
			toShop() {
				uni.removeStorage({
					key: 'selectedPlan'
				});
				uni.setStorageSync('selectedPlan', this.planList[this.selectedPlan]);
				uni.navigateTo({
					url: '/pages/joinUs/shop'
				})
			}
		}
	}
</script>

<style lang="scss">
	page {
		// background-color: #000;
		background-color: #F5F5F5;
	}
</style>

<style lang="scss" scoped>
	$bottomHeight: 215rpx;

	.back-btn {
		position: fixed;
		left: 16rpx;
		z-index: 100;
		width: 54rpx;
		height: 54rpx;
	}

	.new-contain-title {
		font-family: PingFangSC, PingFang SC;
		font-weight: 600;
		font-size: 24rpx;
		color: #222222;
		line-height: 36rpx;
		text-align: left;
		font-style: normal;
		text-transform: none;
	}

	.new-contain-tip {
		font-family: PingFangSC, PingFang SC;
		font-weight: 300;
		font-size: 24rpx;
		color: #666666;
		line-height: 36rpx;
		text-align: left;
		font-style: normal;
		text-transform: none;
	}

	.new-title {
		font-family: PingFangSC, PingFang SC;
		font-weight: 600;
		font-size: 28rpx;
		color: #222222;
		line-height: 40rpx;
		text-align: left;
		font-style: normal;
		text-transform: none;
	}

	.new-qi {
		color: #333 !important;
	}

	.new-jine {
		font-family: PingFangSC, PingFang SC;
		font-weight: 600;
		font-size: 28rpx;
		color: #FF5937;
		line-height: 40rpx;
		text-align: left;
		font-style: normal;
		text-transform: none;
	}

	.back-btn image {
		width: 54rpx;
		height: 54rpx;
	}

	.app {
		height: 100vh;
		position: relative;
		padding-bottom: $bottomHeight;

		* {
			box-sizing: border-box;
		}

		.box_center {
			width: 100%;
			min-height: 100vh;
			position: relative;

			.box_fiexd {
				position: absolute;
				// top: 563rpx;
				top: 523rpx;
				width: 100%;
				padding-bottom: $bottomHeight;
			}

			.box_cente1 {
				margin: 20rpx 29rpx;
				padding: 29rpx 23rpx;
				// background: linear-gradient(180deg, #2c2c2c, #090909);
				background-color: #fff;
				// border: 1px solid #090909;
				// border-top-color: #2c2c2c;
				// border-radius: 5rpx;
				border-radius: 20rpx;
				color: #fff;

				&.ckeckcolor {
					// border: 1px solid #fff !important;
					border: 2rpx solid #FF5937 !important;
				}

				.box_cente_top {
					display: flex;
					justify-content: space-between;
					font-size: 32rpx;
					font-weight: 700;
				}

				.box_cente_but {
					display: flex;
					align-items: center;
					margin-top: 29rpx;

					.box_cente_but1 {
						width: 147rpx;
					}

					.box_cente_but2 {
						width: 267rpx;
					}

					view {
						margin-top: 9rpx;
					}
				}
			}
		}

		.box_btntext {
			margin-top: 701rpx;
			display: flex;
			justify-content: center;
			color: #949392;

			.box_img {
				width: 39rpx;
				height: 39rpx;
				transform: rotate(180deg);
			}
		}

		.box_buttn {
			position: fixed;
			bottom: 0;
			left: 0;
			width: 100%;
			height: calc($bottomHeight - 45rpx);
			padding: 0rpx 30rpx 60rpx;
			// background-color: #1b1e23;
			background-color: #fff;
			display: flex;
			align-items: center;
			justify-content: space-between;
			z-index: 1000;
			box-sizing: border-box;

			.box_buttn1 {
				// color: #fff;
				color: #FF5533;

				.box_buttn_txt1 {
					font-size: 36rpx;
					font-weight: 700;
				}

				.box_buttn_txt2 {
					// font-size: 23rpx;
					// color: #949392;
					margin-top: 9rpx;
					font-family: PingFangSC, PingFang SC;
					font-weight: 400;
					font-size: 24rpx;
					color: #333333;
					line-height: 34rpx;
					text-align: left;
					font-style: normal;
				}

				.box_buttn_txt3 {
					color: #949392;
					font-size: 27rpx;
					margin-left: 20rpx;
					text-decoration-line: line-through;
				}
			}

			.box_buttn2 {
				position: relative;
				color: #fff;

				.box_buttns {
					// width: 222rpx;
					// height: 79rpx;
					// background-color: #fb4500;
					// border-radius: 7rpx;
					color: #fff;
					font-size: 25rpx;
					display: flex;
					align-items: center;

					width: 204rpx;
					height: 68rpx;
					background: #FF5937;
					border-radius: 34rpx;
				}

				.box_buttn_jian {
					position: absolute;
					right: 27rpx;
					// top: 27rpx;
					top: 25rpx;
					// width: 34rpx;
					// height: 29rpx;
					width: 26rpx;
					height: 26rpx;
				}
			}
		}
	}
</style>